import React from 'react';
import {connect} from 'dva';

class Preview extends React.Component{
    render(){
        const {media_src, resource_title, qr_url} = this.props;
        return (
            <div className='show-preview-info'>
                <div className="show-preview-content">
                    <div>
                        <img src={ media_src } width='480' />
                        <div className='preview-detail'>
                            <div className='preview-region'>{ resource_title }</div>
                            <div className='number-region'>
                                <div className='circle-region'>
                                    <span className='button-item'><span className='text-grad'>1</span></span>
                                </div>
                                <div className='line-region'></div>
                                <div className='circle-region'>
                                    <span className='button-item'><span className='text-grad'>2</span></span>
                                </div>
                                <div className='line-region'></div>
                                <div className='circle-region'>
                                    <span className='button-item'><span className='text-grad'>3</span></span>
                                </div>
                            </div>
                                <span className="help-msg-number">
                                    {$._("Mobile open huanshi app")}
                                </span>
                                <span className="help-msg-number">
                                    {$._('Setting-login')}
                                </span>
                                <span className="help-msg-number">
                                    {$._('The identification of AR effect')}
                                </span>
                            <div className="help-msg-alert">
                                <span className='icon-jinggao'></span>
                                {$._('Mobile preview warning')}
                            </div>
                                <span className="help-msg">
                                    {$._('weixin preview from Verify code')}
                                </span>
                            <img className="qr-code-img" width='120' src={ qr_url } />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = ({preview, recognize}) =>{
    return {
        qr_url: preview.qr_url,
        media_src: recognize.media_src,
        resource_title: recognize.resource_tag_title
    }
}


export default connect(mapStateToProps)(Preview);
